<template>
    <div class="resume-show">
      <el-container>
        <el-main>
            <el-row :gutter="21">
                <el-col :span="10">
                    <el-card>
                        <!-- 各部门入职人数 -->
                        <div class="chart" ref="departmentChart"></div>
                    </el-card>
                </el-col>
                <el-col :span="7">
                    <el-card>
                        <!-- 性别比例 -->
                        <div class="chart" ref="genderChart"></div>
                    </el-card>
                </el-col>
                <el-col :span="7">
                    <el-card>
                        <!-- 学历分布 -->
                        <div class="chart" ref="educationChart"></div>
                    </el-card>
                </el-col>
            </el-row><br/>
            <el-row :gutter="21"> 
                <el-col :span="10">
                    <el-card>
                        <!-- 各部门招聘完成度 -->
                        <div class="chart" ref="departmentCompletionChart"></div>
                    </el-card>
                </el-col>
                <el-col :span="7">
                    <el-card>
                        <!-- 年龄分布 -->
                        <div class="chart" ref="ageDistributionChart"></div>
                    </el-card>
                </el-col>
                <el-col :span="7">
                    <el-card>
                        <!-- 招聘完成度 -->
                        <div class="chart" ref="completionChart"></div>
                    </el-card>
                </el-col>
            </el-row>
        </el-main>
      </el-container>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import axios from 'axios';
export default {
    name: 'ResumeShow',
    data() {
        return {
            chartData: {},
            chartOptions: {
                department: {
                    title: {
                        text: '各部门入职人数'
                    },
                    series: []
                },
                gender: {
                    title: {
                        text: '性别比例'
                    },
                    series: []
                },
                education: {
                    title: {
                        text: '学历分布'
                    },
                    series: []
                },
                departmentCompletion: {
                    title: {
                        text: '各部门招聘完成度'
                    },
                    series: [
                        { name: '销售部', value: 53 },
                        { name: '技术部', value: 26 },
                        { name: '人事部', value: 15 },
                        { name: '产品部', value: 6 }
                    ]
                },
                ageDistribution: {
                    title: {
                        text: '年龄分布'
                    },
                    series: []
                },
                completion: {
                    title: {
                        text: '招聘完成度'
                    },
                    series: []
                }
            }
        };
    },
    mounted() {
        this.init();
    },
    methods: {
        // 查询
        init(){
            axios.get('/api/cand/findShuJvList').then(res => {
                this.chartData = res.data.data
                this.initCharts();
            })
        },
        initCharts() {
            // 初始化各部门入职人数图表
            const departmentChart = echarts.init(this.$refs.departmentChart);
            departmentChart.setOption({
                title: {
                    text: this.chartOptions.department.title.text
                },
                tooltip: {},
                legend: {
                    orient: 'vertical',
                    left: 'right'
                },
                
                series: [
                    {
                        type: 'pie',
                        radius: ['40%', '70%'], // 内半径和外半径
                        data: this.chartData.entryNum || [],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ],
                //  graphic: {
                //    type: 'text',
                //     left: 'center',
                //     top: 'center',
                //     style: {
                //         text: '93人',
                //         fontSize: 24,
                //         // fontWeight: 'bold',
                //         fill: '#000'
                //     }
                //     }
            });

            // 初始化性别比例图表
            const genderChart = echarts.init(this.$refs.genderChart);
            genderChart.setOption({
                title: {
                    text: this.chartOptions.gender.title.text
                },
                tooltip: {},
                legend: {
                    orient: 'vertical',
                    left: 'right'
                },
                series: [
                    {
                        type: 'pie',
                        radius:  ['30%', '60%'], // 内半径和外半径
                        data: this.chartData.sexNum || [],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            });

            // 初始化学历分布图表
            const educationChart = echarts.init(this.$refs.educationChart);
            educationChart.setOption({
                title: {
                    text: this.chartOptions.education.title.text
                },
                tooltip: {},
                legend: {
                    orient: 'vertical',
                    left: 'right'
                },
                series: [
                    {
                        type: 'pie',
                        radius:  ['30%', '60%'], // 内半径和外半径
                        data: this.chartData.degreeNum || [],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            });

            // 初始化各部门招聘完成度图表
            const departmentCompletionChart = echarts.init(this.$refs.departmentCompletionChart);
            departmentCompletionChart.setOption({
                title: {
                    text: this.chartOptions.departmentCompletion.title.text
                },
                tooltip: {},
                legend: {
                    orient: 'vertical',
                    left: 'right'
                },
                series: [
                    {
                        type: 'pie',
                        radius:  ['30%', '60%'], // 内半径和外半径
                        data: this.chartData.BaifenbiNum || [],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            });

            // 初始化年龄分布图表
            const ageDistributionChart = echarts.init(this.$refs.ageDistributionChart);
            ageDistributionChart.setOption({
                title: {
                    text: this.chartOptions.ageDistribution.title.text
                },
                tooltip: {},
                legend: {
                    orient: 'vertical',
                    left: 'right'
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['30%', '60%'], // 内半径和外半径
                        data: this.chartData.ageNum || [],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            });

            // 初始化招聘完成度图表
            const completionChart = echarts.init(this.$refs.completionChart);
            completionChart.setOption({
                title: {
                    text: this.chartOptions.completion.title.text
                },
                tooltip: {},
                legend: {
                    orient: 'vertical',
                    left: 'right'
                },
                series: [
                    {
                        type: 'pie',
                        radius:  ['30%', '60%'], // 内半径和外半径
                        data: this.chartData.RuzhiNum || [],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            });
        }
    }
};
</script>

<style scoped>
.resume-show {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.el-container {
    width: 100%;
    margin: 0 auto;
}

.el-main {
    padding: 11px;
}

.chart {
    width: 100%;
    height: 300px;
    margin-bottom: 20px;
}
</style>